<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="EliteCRM, WebChat" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="WebChat" />
<style type="text/css">
	body, html, #allmap {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    input, button, select, textarea {
	    outline: 0;
	    font-family: inherit;
	}

    #r-result {
        position: absolute;
        left: 20px;
        top: 59px;
        width: 330px;
       	height: auto;
        background: #fff;
        overflow: auto;
        max-height: 80%;'
    }

	#left-panel {
		position: absolute;
	    left: 20px;
	    top: 20px;
	    overflow: hidden;
	    pointer-events: none;
	}
	
	#searchbox {
	    border-radius: 2px;
	    position: relative;
	    z-index: 5;
	}

    #searchbox .button {
        pointer-events: auto;
	    background: url(./images/baidumap_searchbox.png) no-repeat 0 -76px #3385ff;
	    width: 57px;
	    height: 38px;
	    float: left;
	    border: 0;
	    padding: 0;
	    cursor: pointer;
	    border-radius: 0 2px 2px 0;
	    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
    }
    
    #searchbox-container {
    	position: relative;
	    z-index: 2;
	    pointer-events: auto;
	    float: left;
	    box-sizing: border-box;
	    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
    }
    
    #sole-searchbox-content .searchbox-content-common {
		box-sizing: border-box;
	    border: 0;
	    padding: 9px 0;
	    border-left: 10px solid transparent;
	    border-right: 27px solid transparent;
	    line-height: 20px;
	    font-size: 16px;
	    height: 38px;
	    color: #333;
	    position: relative;
	    border-radius: 2px 0 0 2px;
    }
    .searchbox-content {
	    border-radius: 2px 0 0 2px;
	    background: #fff;
	}
	.searchbox-content .searchbox-content-common {
	    box-sizing: border-box;
	    float: left;
	    width: 329px;
	    height: 38px;
	}
	@media screen and (max-width: 400px) {
		.searchbox-content .searchbox-content-common {
			width: 230px;
		}
	}

    #sole-searchbox-content .input-clear {
	    right: 5px;
	}
	.searchbox-content .input-clear {
	    cursor: pointer;
	    position: absolute;
	    width: 27px;
	    height: 38px;
	    top: 0;
	    background: url(./images/baidumap_searchbox.png) no-repeat 0 -114px #fff;
	    display: none;
	}
    .hidden {
        display: none;
    }
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=F4a10010b5a1b98e2f628c9af2d2f2b1&=1"></script>
<script type="text/javascript" src="js/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	function getparafromurl() {
	    var url, pos, parastr, para = {};
	    url = window.location.href;
	    pos = url.indexOf("?")
	    parastr = url.substring(pos+1);
	    var paraArr = parastr.split("&");
	    for (var i = 0; i < paraArr.length; i++) {
	    	var paraOne = paraArr[i];
	    	para[paraOne.substring(0,paraOne.indexOf("="))] = paraOne.substring(paraOne.indexOf("=") + 1, paraOne.length);
	    }
		return para;
	}
	
	$(function() {
		var params = getparafromurl(),
			noSearch = params.noSearch,
			latitude = params.latitude,
			longitude = params.longitude,
			label = params.label;
		var map = new BMap.Map("allmap");// 创建Map实例
		map.enableScrollWheelZoom();// 启用滚轮放大缩小
		var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map, panel: "r-result"}
        });
		if (noSearch) {
			$("#searchbox").css("display", "none");
		}
		if (latitude && longitude) {
			var point = new BMap.Point(longitude, latitude);// 创建点坐标
			var gpsMkr = new BMap.Marker(new BMap.Point(longitude, latitude));
			gpsMkr.addEventListener("click", function() {
				var strXY = this.getPosition().lng.toFixed(3) + ", " + this.getPosition().lat.toFixed(3);
				var labelText;
	            if (label) {
	            	labelText = decodeURIComponent(label);
	            } else {
	            	labelText = "GPS: " + strXY;
	            }
	            var infoWin = new BMap.InfoWindow(labelText, {enableMessage: false});
	            this.openInfoWindow(infoWin);
	        });
			
			map.addOverlay(gpsMkr);
			map.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别。
		} else {
			var geolocation = new BMap.Geolocation();// 通过浏览器获取当前坐标
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					map.centerAndZoom(r.point, 12); 
				}    
			});
		}
		
		$('.button').on('click', function() {
			doSearch();
        });
		
		$('input[name=word]').on('keydown', function(e) {
			if (e.keyCode === 13) {
				doSearch();
			}
		});
		
		var doSearch = function() {
			var keyword = $('input[name=word]').val();
            // keyword = keyword ? keyword : '""';
            local.search(keyword);
            local.setMarkersSetCallback(function(pois) {
                var city, province;
                $.each(pois, function(i, v) {
                    v.marker.addEventListener("click", function (e) {
                    	console.log(e);
                    });
                });
            });
		}
		
		$('.input-clear').click(function(){
			$('input[name=word]').val('');
			$('#r-result').html('');
		});
	});
</script>
<title>百度地图</title>
</head>
<body>
<div id="allmap"></div>
<div id="left-panel">
	<div id="searchbox">
		<div id="searchbox-container">
			<div id="sole-searchbox-content" class="searchbox-content">
				<input id="sole-input" class="searchbox-content-common" type="text" name="word" autocomplete="off" maxlength="256" placeholder="请输入您要搜索的地址" value="">
				<div class="input-clear" title="清空" style="display: block;"></div>
			</div>
		</div>
	    <button class="button"></button>
	</div>
</div>
<div id="r-result"></div>
</body>
</html>